<section class="sv-header">

    
      <div class="sv-logo-light" >
          <a href="<?php echo esc_url(home_url());?>">
          <img src="<?php echo esc_url(get_theme_mod( 'sv_second_logo' )); ?>">
          </a>
     </div>

     <nav class="sv-nav">
         <?php wp_nav_menu( array( 'theme_location' => 'sv-menu', 'menu_id' => 'sv-menu' ) ); ?>


         <button class="sv-menu-button-light">

  <a href="<?php echo esc_url(get_theme_mod('contact_link')); ?>">
  <span class="sv-menu-button-text">Contact</span>
  </a>
  </button>
     </nav>


 </section>
 
 
 
 ===================================================================================
 old dark html
 ===================================================================================
 
 
  <section class="sv-header">

        
         <div class="sv-logo" >
             <a href="<?php echo esc_url(home_url());?>">
            <img src="<?php echo esc_url(get_theme_mod( 'sv_second_logo' )); ?>">
             </a>
        </div>

      <div class= "navi">
        <nav class="sv-nav">
            <?php wp_nav_menu( array( 'theme_location' => 'sv-menu', 'menu_id' => 'sv-menu' ) ); ?>
        
        </div>
     




     <button class="sv-menu-button">
     <a href="<?php echo esc_url(get_theme_mod('contact_link'));?>">
     <span class="sv-menu-button-text">Contact</span>
     </a>
     </button>
	 </nav>
        
     </section>
	 
	 
========================================================================================
========================================================================================
 
 
 @media screen and (max-width: 1070px) {

  .navi{
    
  
  }

  .sv-nav {
    position:fixed;
    top:70;
    right:276px;
  }

 

  .sv-logo{
 
    width: 150px;
    height: 130px;
    padding-top:20px;
    padding-left:15px;
  }
  
}

@media screen and (max-width: 900px) {

.sv-logo{
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 150px;
  height: 130px;
  padding-top:40px;


}

.navi {
  display: none;
}

.sv-menu-button {
  display: none;
}

}

============================================================================================
old dark css
============================================================================================

.sv-header{
  height:160px;
  color:silver;
  background-color:black;
  width:100%;
}

.navi{
position:absolute;
top:70px;
left:90px;
margin-left:240px;


}


.sv-nav {


display: flex;
align-items: center;
justify-content: center;
margin-right:0px;

 
}

.sv-nav li {
  display: inline-block;
  padding: 0 10px;
}


.sv-header .sv-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sv-header .sv-nav ul li {
  margin: 0 15px;

}



.sv-nav li a {
  color: #fff; /* set the color of the menu item text */
  text-decoration: none; /* remove the underline from the menu item text */
  font-size: 26px; /* increase the font size of the menu item text */
  font-weight: bold; /* make the menu item text bold */
}

.sv-nav li a:hover {
  color: #333; /* set the hover color of the menu item text */
}

.sv-logo  {
  width: 130px;
  height: 130px;
  padding-top:0px;
  
}



.sv-menu-button {
    float:right;
	width: 100px;
	height: 100px;
	background-color: black;
	border-radius: 50%;
	border: 1px solid #000;
	box-shadow: 0 0 10px #000;
	z-index: 100;
	cursor: pointer;
	margin-top:23px;
	margin-left:51px;
}

.sv-menu-button-text {
  transform: translate(-50%, -50%);
  font-weight: bold;
  text-align: center;
  color:blue;


}